<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    {% block head%}
    {% endblock %}
    <link rel="shortcut icon" href="/media/logo.png" type="image/x-icon">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <img src="/media/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
                HDUDB</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.gzblog.tech/">我的博客</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://gitee.com/johnsmith253325/hdudb" tabindex="-1"
                            data-bs-toggle="tooltip" data-bs-placement="bottom" title="给个 Star 好不好？">Gitee 页面</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="http://newjw.hdu.edu.cn" tabindex="-1">船新选课平台</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'lesson:about' %}" tabindex="-1">关于我们</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle dropdown-button" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            登陆
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <form class="px-4 py-3 loginform">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label class="form-label">用户名</label>
                                    <input name="username" class="form-control" placeholder="在这里输入你的用户名" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">密码</label>
                                    <input name="password" type="password" class="form-control" placeholder="在这里输入你的密码"
                                        required>
                                    <div id="passwordHelpBlock" class="form-text">你的密码会被加密存储，即使我们也不知道你的密码。
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" required>
                                        <label class="form-check-label" for="exampleCheck1">我承诺以尊重他人的方式发表言论</label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">登陆</button>
                            </form>
                            <div class="dropdown-divider"></div>
                            <a href="{% url 'lesson:signup_page' %}" class="dropdown-item" href="#">没有账户？注册一个！</a>
                            <a class="dropdown-item forgot-password" href="#">忘记密码？</a>
                        </div>
                    </li>
                </ul>
                <form class="d-flex" action="{% url 'lesson:search' %}" method="POST">
                    {% csrf_token %}
                    <input class="form-control me-2" type="search" placeholder="搜索课程和评论" aria-label="Search"
                        name="keywords">
                    <button class="btn btn-outline-success" type="submit">🔍</button>
                </form>
                <div class="d-grid d-md-flex justify-content-md-end m-2 ">
                    <a class="btn btn-primary" href="{% url 'lesson:createlesson' %}">创建课程</a>
                </div>
            </div>
        </div>
    </nav>
    {% block content %}
    {% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">
    </script>
    <script async>
        let loginform = document.querySelector('.loginform');
        let dropdownbutton = document.querySelector('.dropdown-button');
        let dropdownmenu = document.querySelector('.dropdown-menu');
        let forgotpassword = document.querySelector('.forgot-password');

        function sendlogin(target) {
            let XHR = new XMLHttpRequest();
            let FD = new FormData(target);
            XHR.addEventListener('load', function (event) {
                obj = JSON.parse(event.target.responseText);
                if (obj['succeeded'] == true) {
                    localStorage.setItem('token', obj['token'])
                    localStorage.setItem('username', obj['username'])
                    location.reload();
                } else {
                    alert(obj['message']);
                }
            });
            XHR.addEventListener('error', function (event) {
                alert("提交失败，请检查网络连接并重载本页面");
            });
            XHR.open('POST', '/login/');
            XHR.send(FD);
        }

        loginform.addEventListener('submit', function (event) {
            event.preventDefault();
            sendlogin(event.target);
        });

        if (localStorage.getItem('token') != null && localStorage.getItem('username') != null) {
            loginform.remove();
            dropdownbutton.innerHTML = localStorage.getItem('username');
            dropdownmenu.innerHTML =
                '<div class="d-grid gap-2"><button class="btn btn-primary logout-button">登出</button></div>';
            let logoutbutton = document.querySelector(".logout-button");
            logoutbutton.addEventListener('click', function (e) {
                localStorage.removeItem('token');
                localStorage.removeItem('username');
                location.reload();
            });
        }

        forgotpassword.addEventListener('click', function (event) {
            alert("如你所见，我们没有办法自动验证你的身份（毕竟注册的时候都没要求你填邮箱啥的:p），请联系管理员重设密码");
        });
    </script>
</body>

</html>